<template>
	<view class="order_comment">
		<view class="order_goods_info">
			<view class="order_img">
				<image :src="goodsInfo.goods_image" mode="aspectFit"></image>
			</view>
			
			<view class="order_goods_info2">
				<view class="title">{{goodsInfo.goods_name||''}}</view>
				<view class="price">￥{{orderInfo.total_price||'0.00'}}</view>
			</view>
		</view>
		
		<view class="order_comment_star">
			<view class="goods">
				<text>综合评分</text>
				<sx-rate :value.sync="comment.score" @change="star_change" class="star"></sx-rate>
			</view>
			<view class="goods">
				<text>产品相符</text>
				<sx-rate :value.sync="comment.agree" @change="star_change" class="star"></sx-rate>
			</view>
			<view class="goods">
				<text>服务态度</text>
				<sx-rate :value.sync="comment.service" @change="star_change" class="star"></sx-rate>
			</view>
			<view class="goods">
				<text>发货速度</text>
				<sx-rate :value.sync="comment.speed" @change="star_change" class="star"></sx-rate>
			</view>
		</view>
		
		<view class="order_comment_content">
			<view class="content">
				<textarea style="min-height: 120rpx;" v-model="comment.content" auto-height placeholder="请输入您对该产品的评价!" />
			</view>
			
			<view class="order_comment_img">
				<upload-img :url="uploadUrl" :length="4" :count="4" @uploadSuccess="upload_success"></upload-img>
			</view>
		</view>
		
		<view class="btn" @click="add_comment">提交评论</view>
	</view>
</template>

<script>
	import SxRate from '@/components/sx-rate'
	import uploadImg from '@/components/upload-images.vue'
	export default {
		components:{
			SxRate,
			uploadImg
		},
		onLoad(opt) {
			this.uploadUrl = this.$api.order_comments.url+'/thumb/upload';
			this.id = opt.id;
			this.comment.order_id = opt.id;
			// this.comment.order_id = opt.order_id;
			this.get_order_info();
		},
		data() {
			return {
				id:0,
				uploadUrl:'',
				info:{},
				comment:{
					order_id:0,
					score:5,
					agree:5,
					service:5,
					speed:5,
					content:'',
					image:[],
				},
				orderInfo:{},
				goodsInfo:{},
			};
		},
		methods:{
			get_order_info(){
				let obj = {...this.$api.orders}
				obj.url += '/get_order_info/'+this.id;
				this.$http(obj).then(res=>{
					this.orderInfo = res.data;
					this.goodsInfo = res.data.order_goods[0]
				})
			},
			add_comment(){
				console.log(this.comment)
				let obj = {...this.$api.order_comments}
				obj.method = 'post';
				this.$http(obj,this.comment).then(res=>{
					console.log(this.comment)
					if(res.code == 200){
						this.$toast(res.msg);
						uni.$emit('orders');
						return this.$nav("",3);
					}else{
						this.$toast(res.msg);
					}
				})
			},
			upload_success(e){
				this.comment.image = [];
				e.forEach(item=>{
					this.comment.image.push(item.src)
				})
			},
			star_change(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>

.order_comment{
	font-size: 28rpx;
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 80rpx;
		margin: 80rpx auto 30rpx;
		font-size: $uni-font-size-lg;
		color: #fff;
		background-color: $uni-color-error;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(245, 70, 108, 0.4);
	}
	.order_comment_content{
		padding:30rpx;
		background-color: #fff;
		border-top: 1px solid #f1f1f1;
		textarea{
			font-size: $uni-font-size-base;
		}
		.order_comment_img{
			margin-top: 30rpx;
		}
	}
	.order_comment_star{
		padding:30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.goods{
			font-size: $uni-font-size-lg;
			color:#666;
			margin-bottom: 20rpx;
			text{
				float: left;
				margin-right: 40rpx;
			}
			
			&:after{
				content:'';
				display: block;
				clear: both;
			}
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.order_goods_info{
		padding:30rpx;
		background-color: #fff;
		display: flex;
		width: 100%;
		.order_img{
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			background-color: #f5f5f5;
			margin-right: 20rpx;
			image{
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
		}
		.order_goods_info2{
			flex-direction: column;
			overflow: hidden;
			flex:1 ;
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.price{
				margin-top: 20rpx;
				color:$uni-color-error;
			}
		}
	}
}
</style>
